<template>
  <div class="app-header">
    <el-button
      type="text"
      @click="toggleSidebar"
      class="toggle-button"
    >
      <i class="fas" :class="isCollapse ? 'fa-indent' : 'fa-outdent'"></i>
    </el-button>
    <div class="header-title">
      <h2>{{ pageTitle }}</h2>
    </div>
    <div class="header-actions">
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="fas fa-user-circle fa-lg"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item disabled>管理员</el-dropdown-item>
            <el-dropdown-item divided>
              <i class="fas fa-sign-out-alt"></i> 退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isCollapse: Boolean,
  pageTitle: String
})

const emit = defineEmits(['toggle'])

const toggleSidebar = () => {
  emit('toggle')
}
</script> 